<div class="layui-row">
    <div class="layui-col-md8">
        <form class="layui-form" action="">
                <div class="layui-form-item">
                    <input type="hidden" value="" class="fenlei_value">
                    <label class="layui-form-label">分类</label>
                    <div class="layui-input-inline fenlei_select" style="width:350px;">
                        <select name="city" class="fenlei" lay-filter="fenlei">

                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">话题</label>
                    <div class="layui-input-inline huati_div" style="width:350px;">
                        <select name="city" class="huati">

                        </select>

                    </div>
                    <div class="layui-form-mid layui-word-aux">请先选择分类</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">添加视频</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn video" id="video"><i class="layui-icon">&#xe67c;</i>添加视频</button>
                        <input type="text" name="" class="wenzi1" style="width:300px;height:35px;margin-left:20px;display:none;">
                        <span class="up1" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                        <input type="hidden" name="video_url" class="video_url">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">横屏封面</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn hengping" id="hengping"><i class="layui-icon">&#xe67c;</i>添加横屏封面</button>
                        <input type="text" name="" class="wenzi2" style="width:300px;height:35px;margin-left:20px;display:none;">
                        <span class="up2" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                        <input type="hidden" name="hengping_url" class="hengping_url">
                        <br><br>
                        <div style="width:100px;height:100px;border:1px solid lightgreen;float: left;">
                            <img src="" class="hengping_http" style="width:100px;height:100px;">
                        </div>
                        <div class="layui-form-mid layui-word-aux" style="float: right;">必填</div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">竖屏封面</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn shuping" id="shuping"><i class="layui-icon">&#xe67c;</i>添加竖屏封面</button>
                        <input type="text" name="" class="wenzi3" style="width:300px;height:35px;margin-left:20px;display:none;">
                        <span class="up3" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                        <input type="hidden" name="shuping_url" class="shuping_url">
                        <br><br>
                        <div style="width:100px;height:100px;border:1px solid lightgreen;">
                            <img src="" class="shuping_http" style="width:100px;height:100px;">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">分享封面</label>
                    <div class="layui-input-inline">
                        <button type="button" class="layui-btn share" id="share"><i class="layui-icon">&#xe67c;</i>添加分享封面</button>
                        <input type="text" name="" class="wenzi4" style="width:300px;height:35px;margin-left:20px;display:none;">
                        <span class="up4" style="width:300px;height:35px;margin-left:20px;display:none;color:red;"></span>
                        <input type="hidden" name="share_url" class="share_url">
                        <br><br>
                        <div style="width:100px;height:100px;border:1px solid lightgreen;float:left;">
                            <img src="" class="share_http" style="width:100px;height:100px;">
                        </div>
                        <div class="layui-form-mid layui-word-aux" style="float: right;">必填</div>

                    </div>
                </div>
                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">视频标题</label>
                    <div class="layui-input-block" style="width:400px;">
                        <textarea name="title" placeholder="请输入标题" class="layui-textarea video_title"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn save">保存</button>
                        <button type="button" class="layui-btn layui-btn-primary back">取消</button>
                    </div>
                </div>

            </form>
    </div>
    <div class="layui-col-md4">
        <h4>视频预览</h4>
        <div style="width:90%;height:300px;border:1px solid lightgreen;">
            <video src="" class="video_http" style="width:90%;height:300px;" controls></video>
        </div>
    </div>
</div>


<script>
    //保存
    $(".save").click(function(){
        var fenlei=$(".fenlei").val();
        var huati=$(".huati").val();
        var video_url=$(".video_url").val();
        var hengping_url=$(".hengping_url").val();
        var shuping_url=$(".shuping_url").val();
        var share_url=$(".share_url").val();
        var video_title=$(".video_title").val();
//        var a=[fenlei,huati,video_url,hengping_url,shuping_url,share_url,video_title]
        $.ajax({
            type:"post",
            data:{fenlei:fenlei,huati:huati,video_url:video_url,hengping_url:hengping_url,shuping_url:shuping_url,share_url:share_url,video_title:video_title},
            dataType: "json",
            url: "<?=base_url("material/activity_material/save_add_activity")?>",
            success: function (res) {
                if(res.code==0){
                    layer.msg(res.msg, {time:1000},function(){
                        window.location.href=res.data
                    });
                }else{
                    layer.msg(res.msg, {time: 2000});
                }
            }
        })
    })

    $(function(){
        //上传
        layui.use('upload', function(){
            var upload = layui.upload;
            //上传视频
            upload.render({
                elem: '#video' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "video"}
                ,size:"51200"
                ,accept: 'video'
                ,acceptMime: 'video/mp4,video/mov,video/avi'
                ,before:function(){
                    $(".up1").text("上传中。。。请等待");
                    $(".up1").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up1").text("上传成功");
                            $('.video_http').attr("src",res.data.file_url)
                            $('.video_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传横屏封面
            upload.render({
                elem: '#hengping' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up2").text("上传中。。。请等待");
                    $(".up2").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up2").text("上传成功");
//                            $(".wenzi2").show();
//                            $(".wenzi2").val(res.data.file_url);
                            $('.hengping_http').attr("src",res.data.file_url)
                            $('.hengping_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传竖屏封面
            upload.render({
                elem: '#shuping' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up3").text("上传中。。。请等待");
                    $(".up3").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up3").text("上传成功");
//                            $(".up3").hide()
//                            $(".wenzi3").show();
//                            $(".wenzi3").val(res.data.file_url);
                            $('.shuping_http').attr("src",res.data.file_url)
                            $('.shuping_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });

            //上传分享封面
            upload.render({
                elem: '#share' //绑定元素
                , url: "<?=base_url("common/upload/normal_upload")?>"
                , data: {type: "image"}
                ,acceptMime: 'image/*'
                ,before:function(){
                    $(".up4").text("上传中。。。请等待");
                    $(".up4").show()
                }
                ,done: function(res){
                    //上传完毕回调
                    if(res.code==0){
                        layer.msg(res.msg,{time:1000},function(){
                            $(".up4").text("上传成功");
//                            $(".up4").hide()
//                            $(".wenzi4").show();
//                            $(".wenzi4").val(res.data.file_url);
                            $('.share_http').attr("src",res.data.file_url)
                            $('.share_url').val(res.data.file_url)
                        })
                    }else{
                        layer.msg(res.msg,{time:2000})
                    }
                }
            });
        });

        //监听下拉框
        layui.use('form', function(){
            var form = layui.form;
            //监听下拉框选择
            form.on('select(fenlei)', function(data){
                //获得监听的值
                var type_id=data.value;
                //给下拉框赋值
                $('.fenlei_value').val(type_id);
                //获得下拉框的值
                var type_ids=$('.fenlei_value').val();
                //有参数传递，则是POST方式,这是下拉框局部刷新
                $(".huati").load("<?=base_url("material/activity_material/get_huati")?>",{huati_id:type_ids},function(res){
                    //把数据json转化下
                    var arr = JSON.parse(res);
                    if(arr.code==0){
                        var arrs = arr.data;
                        $.each(arrs, function (i, n) {
                            $('.huati').append("<option value='" + n.id + "'>" + n.sub_title + "</option>");
                        });
                        layui.form.render('select');
                    }else{
                        layer.msg(arr.msg, {time: 2000},function(){
                            $('.huati').append("<option value=''></option>");
                        });
                        layui.form.render('select');
                    }
                });
            })
        })

    })
    //获取分类
    $.ajax({
        type: "get",
        data: {},
        dataType: "json",
        url: "<?=base_url("material/activity_material/get_fenlei")?>",
        success: function (res) {
            if(res.code==0){
//                var arr = JSON.parse(res.data);
                var arr = res.data;
                $.each(arr, function (i, n) {
                    $('.fenlei').append("<option value='" + n.id + "'>" + n.name + "</option>");
                });
                layui.form.render('select');
            }else{
                layer.msg(res.msg, {time: 2000});
            }
        }
    })
    //没有先选择分类加个提示框
    $(".layui-input-inline.huati_div").click(function(){
        var fenlei_value=$(".fenlei_value").val();
        if(fenlei_value.length==0){
            layer.msg("请先选择分类",{time:2000})
        }
    })
    //返回
    $(".back").click(function(){
        window.history.back(-1);
    })
</script>